<template>
  <button
    :class="triggerClasses"
    @click="handleClick"
    :disabled="disabled"
  >
    <slot />
  </button>
</template>

<script setup lang="ts">
import { computed, inject } from 'vue'
import { cn } from '@/lib/utils'

interface Props {
  value: string
  disabled?: boolean
}

const props = defineProps<Props>()

const tabsContext = inject('tabsContext') as any

const triggerClasses = computed(() => {
  const isActive = tabsContext?.activeTab.value === props.value
  
  return cn(
    'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
    isActive 
      ? 'bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 shadow-sm' 
      : 'hover:bg-white/50 dark:hover:bg-slate-800/50 hover:text-slate-900 dark:hover:text-slate-100'
  )
})

const handleClick = () => {
  if (!props.disabled) {
    tabsContext?.setActiveTab(props.value)
  }
}
</script>

<script lang="ts">
export default {
  name: 'TabsTrigger'
}
</script>